import React, { useState } from 'react'
import style from './style.module.scss'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faShare } from '@fortawesome/free-solid-svg-icons'
import ModalView from '../../ModalView'
import { CopyOutlined, CheckOutlined } from '@ant-design/icons'

interface IShareBtnProps {
    width: string
    height: string
    userName?: string
}

export default function ShareBtn(props: IShareBtnProps) {
    const [expend, setExpend] = useState(false)
    const [copyState, setCopyState] = useState(false)
    const [inputValue, setInputValue] = useState('https://lineview.com/' + window.location.pathname)

    const copy = () => {
        document.designMode = 'on'
        let ele = document.createElement('input')!
        document.body.appendChild(ele)
        ele.setAttribute('value', inputValue)
        ele.setAttribute('readonly', 'readonly')
        ele.select()
        document.execCommand('copy')
        document.body.removeChild(ele)
        document.designMode = 'off'
    }

    return (
        <>
            <div
                className={style.container}
                onClick={() => {
                    setExpend(!expend)
                    setCopyState(false)
                }}
                style={{
                    ['--width' as any]: props.width,
                    ['--height' as any]: props.height
                }}>
                <FontAwesomeIcon icon={faShare} />
                <span>分享</span>
            </div>
            {expend ? (
                <ModalView onClose={() => setExpend(false)}>
                    <div className={style.modal__container}>
                        <span className={style.title}>分享</span>
                        <span>摄影师： {props.userName}</span>
                        <div className={style.copy__input}>
                            <span>{inputValue}</span>
                            {/*<input type="text" value={inputValue} readOnly={true} />*/}
                            {copyState ? (
                                <CheckOutlined className={style.check} />
                            ) : (
                                <CopyOutlined
                                    onClick={() => {
                                        setCopyState(true)
                                        copy()
                                    }}
                                />
                            )}
                        </div>
                    </div>
                </ModalView>
            ) : (
                ''
            )}
        </>
    )
}
